<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>图片列表</title>
    <link href="${contextPath}/resources/css/prettyPhoto.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <link href="${contextPath}/resources/css/style.default.css" rel="stylesheet">
    <link href="${contextPath}/resources/css/jquery.datatables.css" rel="stylesheet">
    <link href="${contextPath}/resources/css/jquery.gritter.css" rel="stylesheet">

    <script src="${contextPath}/resources/js/jquery-1.11.1.min.js"></script>
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="${contextPath}/resources/js/html5shiv.js"></script>
    <script src="${contextPath}/resources/js/respond.min.js"></script>
    <![endif]-->
    <script src="${contextPath}/resources/js/jquery-migrate-1.2.1.min.js"></script>
    <script src="${contextPath}/resources/js/jquery-ui-1.10.3.min.js"></script>
    <script src="${contextPath}/resources/js/bootstrap.min.js"></script>
    <script src="${contextPath}/resources/js/modernizr.min.js"></script>
    <script src="${contextPath}/resources/js/jquery.sparkline.min.js"></script>
    <script src="${contextPath}/resources/js/toggles.min.js"></script>
    <script src="${contextPath}/resources/js/retina.min.js"></script>
    <script src="${contextPath}/resources/js/jquery.cookies.js"></script>

    <script src="${contextPath}/resources/js/morris.min.js"></script>
    <script src="${contextPath}/resources/js/raphael-2.1.0.min.js"></script>

    <script src="${contextPath}/resources/js/custom.js"></script>
    <script src="${contextPath}/resources/js/jquery.gritter.min.js"></script>
    <style type="text/css">
        html {
            overflow-x: hidden;
        }
    </style>
</head>
<body style="background:none;">
<c:if test="${empty param.mini}">
    <div class="pageheader">
        <a href="javascript:window.history.go(-1);" class="btn btn-default pull-right">返回</a>

        <h2>案件图片列表</h2>
    </div>
</c:if>
<div class="contentpanel">
    <div class="row">
        <div class="col-sm-12">
            <div class="row filemanager">
                <c:forEach items="${images.images}" var="item" varStatus="status">
                    <div class="col-xs-6 col-sm-4 col-md-3 image">
                        <div class="thmb">
                            <div class="thmb-prev">
                                <a href="${item}" data-rel="prettyPhoto">
                                    <img src="${item}" class="img-responsive" alt="" style="width:288px;height:216px;">
                                </a>
                            </div>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>
    </div>
</div>

<script src="${contextPath}/resources/js/jquery.prettyPhoto.js"></script>

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery('.thmb').hover(function () {
            var t = jQuery(this);
            t.find('.ckbox').show();
            t.find('.fm-group').show();
        }, function () {
            var t = jQuery(this);
            if (!t.closest('.thmb').hasClass('checked')) {
                t.find('.ckbox').hide();
                t.find('.fm-group').hide();
            }
        });
        jQuery("a[data-rel^='prettyPhoto']").prettyPhoto();
    });
</script>

</body>
</html>
